<template>
	<view class="grew-container">
		<view class="header bg-white">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 font-bold common-title">{{ lang_comerciante.subscribe_online }}</view>
			</view>
		</view>

		<view>
			<!-- 日期选择器 -->
			<view class="bg-white">
				<scroll-view scroll-x style="width: 100%;" class="nowrap u-p-t-10 u-p-b-38">
					<view v-for="(item, index) in days" :key="index" :class="[
						'day-item u-m-l-30 u-text-center',
						dayIndex === index ? 'day-item-active' : '',
						index === days.length - 1 ? 'u-m-r-30' : '']" @click="changeDay(index)">
						<view class="u-f-28 u-lh-40 font-medio u-p-t-14">{{ item.day }}</view>

						<view :class="['u-f-20 u-lh-28', dayIndex !== index ? 'color-grew' : '']">
							{{ item.date.slice(5) }}
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 人员选择 -->
			<view class="bg-white u-m-t-10">
				<view class="u-p-t-20 u-p-l-30 u-f-32 u-lh-44 font-medio">{{ lang_comerciante.select_servicer }}</view>

				<scroll-view scroll-x style="width: 100%;" class="nowrap u-p-t-18 u-p-b-34">
					<view v-for="(item, index) in servicers" :key="index" :class="[
						'servicer-item u-m-l-30 u-text-center',
						servicerIndex === index ? 'servicer-item-active' : '',
						index === servicers.length - 1 ? 'u-m-r-30' : '']" @click="changeServicer(index)">
						<view class="u-p-t-22">
							<image :src="showImage(item.imgUrl, serviceImage)" class="service-img"
								@tap.stop="serviceImageClick(item, index)"></image>
						</view>
						<view class="u-f-24 u-lh-34 u-m-t-18 font-medio">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 预约人数 -->
			<view class="bg-white u-m-t-10" style="padding: 20rpx 28rpx 36rpx 30rpx">
				<view class="u-f-32 u-lh-44 font-medio">{{ lang_comerciante.subscribe_message }}</view>

				<view class="flex-center-between u-m-t-14">
					<view class="u-f-28 u-lh-40 font-medio">{{ lang_comerciante.people_number }}</view>
					<view class="clear-flex">
						<u-number-box v-model="form.peopleNumber" :min="1" :max="5" @blur="changePeople"></u-number-box>
					</view>
				</view>

				<view class="flex-center-between u-m-t-34 u-f-28 u-lh-40">
					<view class="font-medio">{{ lang_first.phoneNumber }}</view>

					<view>
						<input v-model="form.phoneNumber" type="number" maxlength="15"
							style="width: 100%; text-align: right" :placeholder="lang_first.phoneNumberTips" />
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="bg-white u-m-t-10" style="padding: 20rpx 28rpx 36rpx 30rpx">
				<view class="u-f-32 u-lh-44 font-medio">{{ lang_common.remark }}</view>

				<view class="u-m-t-18 u-p-10" style="background-color: #F8F8F8;">
					<textarea v-model="form.remark" resize="none" :rows="7" maxlength="20"
						:placeholder="lang_common.remarkTips" style="width: 100%;" />
				</view>
			</view>
		</view>

		<view style="margin-top: 100rpx;">
			<view class="flex-center-center u-m-b-30">
				<x-common-btn box-shadow="0 4rpx 8rpx 0 rgba(252, 31, 63, 0.31)" @click="submitForm()">
					{{ lang_common.subscribe_now }}
				</x-common-btn>
			</view>

			<view class="u-p-b-40 u-f-24 u-lh-34 color-grew u-text-center">
				<view>{{ lang_comerciante.subscribeTips }}</view>
				<view>{{ lang_comerciante.subscribeWarn }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		merchantStaffList
	} from '@/api/user/merchant.js'
	import {
		merchantServiceReverse
	} from '@/api/user/merchantService.js'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				days: [],
				dayIndex: 0,

				servicers: [],
				servicerIndex: 0,

				form: {
					merchantId: '',
					merchantServiceId: '',
					peopleNumber: 1,
					phoneNumber: '',
					remark: ''
				},
				
				isClick: false
			}
		},
		computed: {
			serviceImage() {
				return require(`@/static/image/common/default_male.png`)
			}
		},
		created() {
			// 初始化日期
			// 初始化周期为7
			const DAY = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
			let days = DAY.map((item, index) => {
				let date = dayjs().add(index, 'day').format('YYYY-MM-DD')
				let result = {
					date: date,
					day: !index ? this.lang_time.today : index === 1 ? this.lang_time.tomorrow : this
						.lang_time[DAY[dayjs(dayjs(date)).day()]]
				}
				return result
			})
			this.days = days

			this.servicers = [{
				name: this.lang_comerciante.store_distribute
			}]
		},
		onLoad({
			merchantId,
			merchantServiceId
		}) {
			this.form.merchantId = merchantId
			this.form.merchantServiceId = merchantServiceId
			this.getStaffList()
		},
		methods: {
			// 日期改变后触发
			changeDay(index = 0) {
				this.dayIndex = index
			},
			// 服务人员改变后
			changeServicer(index = 0) {
				this.servicerIndex = index
			},
			// 人数为正整数
			changePeople({
				value
			}) {
				this.$set(this.form, 'peopleNumber', parseInt(value) + '')
			},
			// 点击头像触发
			serviceImageClick(item, index) {
				if (item.staffId) {
					uni.navigateTo({
						url: `/pages/shop/staff/detail/detail?merchantStaffId=${item.staffId}`,
						events: {
							changeAction: () => {
								this.servicerIndex = index
							}
						}
					})
				} else {
					this.servicerIndex = index
				}
			},
			// 提交表单
			submitForm() {
				// 空值处理
				if (!this.form.phoneNumber) {
					return this.$api.msg(this.lang_first.phoneNumberTips)
				}
				const {
					merchantId,
					merchantServiceId,
					peopleNumber: amount,
					phoneNumber: phone,
					remark
				} = this.form
				let {
					date: reverseDate
				} = this.days[this.dayIndex]
				let {
					staffId: merchantStaffId
				} = this.servicers[this.servicerIndex]
				let queryObj = {}
				merchantStaffId && (queryObj.merchantStaffId = merchantStaffId)
				
				if (this.isClick) return;
				this.isClick = true
				merchantServiceReverse({
					merchantId,
					merchantServiceId,
					amount,
					phone,
					reverseDate,
					...queryObj
				}).then((data) => {
					this.$api.msg('提交成功')
					let timer = setTimeout(() => {
						this.isClick = false
						uni.redirectTo({
							url: `/pages/user/comerciante/subscribe/detail/detail?reverseId=${ data }`
						})
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
			},
			// 获取商家员工列表
			getStaffList() {
				if (this.form.merchantId) {
					merchantStaffList({
						pageNumber: 1,
						pageSize: 50,
						merchantId: this.form.merchantId
					}).then((result) => {
						this.servicers = [...this.servicers, ...result]
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.day-item {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		border: 2rpx solid #D9D9D9;
		border-radius: 42rpx;

		&-active {
			color: #FFFFFF;
			background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
			box-shadow: 0 4rpx 8rpx 0 rgba(252, 31, 63, 0.31);
			border-color: transparent;
		}
	}

	.servicer-item {
		display: inline-block;
		width: 164rpx;
		height: 210rpx;
		color: #999999;
		border: 2rpx dashed #DCDCDC;
		border-radius: 8rpx;

		&-active {
			color: #FD174E;
			border: 2rpx solid #FD174E;
		}

		.service-img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 104rpx;
			overflow: hidden;
		}
	}
</style>
